<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="反馈人手机号"></el-input>
            </el-form-item>
            <el-form-item prop="submitTime">
              <el-date-picker v-model="submitTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="提交开始日期" end-placeholder="提交结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="problemType">
               <el-select v-model="searchForm.problemType" clearable placeholder="请选择">
                   <el-option label="功能异常" value="1"></el-option>
                   <el-option label="产品改进" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" stripe>
            <el-table-column prop="feedbackId" label="编号" width="120"></el-table-column>
            <el-table-column prop="telephone" label="反馈人手机号" width="170" align="center"></el-table-column>
            <el-table-column prop="problemTypeName" label="反馈类型" width="140" align="center"></el-table-column>
            <el-table-column prop="content" label="意见反馈内容" show-overflow-tooltip>
              <template slot-scope="scope">
                <span @click="hendleContent(scope.row.content)">{{scope.row.content}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="图片描述"  align="center">
              <template #default="scope">
                 <el-image :src="item.fullFilename" fit="fill" v-image-preview="item.fullFilename" class="img" v-for="item in scope.row.attachmentInfoList" style="margin-right:10px"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="提交日期" width="160"  align="center">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.insertDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="操作" width="140"  align="center">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelt(scope.row)"
                    v-has="'msg:feedback:del'"
                  >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 意见反馈内容 -->
    <el-dialog title="意见反馈内容" width="800px" v-dialogDrag :visible.sync="dialogVisible" @close="dialogVisible = false">
      <div v-html="content"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import option from '../../common/option.js';
  import {
    delMessageFeed,
    messageFeedbacklist
  } from '@/api/getData';

  export default {
    data() {
      return {
        loading: false,
        searchForm: {
          telephone:'',
          problemType:'',
          pageNum:1,
          pageSize:20
        },
        submitTime:[],
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        dialogVisible:false,
        content:'',
      }
    },
    created() {

    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
      hendleContent(content){
        this.content = content;
        this.dialogVisible = true;
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      resetQuery(){
        this.submitTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.submitTime, 'startTime', 'endTime');
          this.loading = true;
          const result = await messageFeedbacklist(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
     handleDelt(row){
         this.$confirm('您确定要删除吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           delMessageFeed({feedbackId :row.feedbackId }).then((result) => {
             if (result.code == '200') {
                  this.dataInfo();
                  this.$message({
                    message: result.msg,
                    type: 'success',
                  });
              }else{
                 this.$message.error(result.msg);
              }
          });
         }).catch(() => {
             console.log(1);
         });
     },

    }
  }
</script>

<style scoped lang="scss">
      .el-table .el-dropdown-link{
        cursor: pointer;
        color: #61997A;
        margin-left: 5px;
      }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
